<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>什么是promise</title>
  </head>
  <body>
    <!-- promise解决回调地狱 -->
    <button onclick="testPromise()">测试链式调用</button>
    <script>
      const a = Math.random()
      const b = Math.random()
      new Promise(function (resolve, reject) {
        if (a > b) {
          // 此时认为成功
          resolve("我成功了")
        } else {
          // 否则失败
          reject("我失败了")
        }
      })
        .then((result) => {
          // 这里获取的是成功的结果
          console.log(result)
        })
        .catch((error) => {
          // 这里获取的是失败的结构
          console.log(error)
        })
    </script>
    <script>
      function testAxios() {
        axios({
          url: "1",
        })
          .then((result) => {
            // 发起第二次请求
            return axios({
              url: "2",
              params: result,
            })
          })
          .then((result) => {
            // 此时的result结果是 上一次的promise执行的结果
            return axios({
              url: "3",
              params: result,
            })
          })
          .then((result) => {
            // 此时的result结果是 上一次的promise执行的结果
            return axios({
              url: "4",
              params: result,
            })
          })
          .then((result) => {
            return axios({
              url: "5",
              params: result,
            })
          })
      }
      // promise最大的作用是 将回调地狱的写法变成了链式调用
    </script>
    <script>
      function testPromise() {
        new Promise(function (resolve, reject) {
          //   想要5秒钟之后成功执行 得到一个 15000的结果
          setTimeout(() => {
            resolve(15000) // 起薪
          }, 3000)
        })
          .then((result) => {
            //   alert(result)
            // 返回的是一个值或者是一个promise对象
            //    return new Promise()
            return result + 1000
          })
          .then((result) => {
            return result + 1000
          })
          .then((result) => {
            return result + 1000
          })
          .then((result) => {
            return new Promise(function (resolve, reject) {
              resolve(result + 2000)
            })
          })
          .then((result) => {
            // 只有等到上一个结果执行完毕
            // 在这个位置获取上一个的结果
            alert(result)
          })
          .catch((error) => {
            alert(error)
          })
      }
    </script>
  </body>
</html>
